// src/pages/article/widgets/favourite/index.tsx
import React from "react";
import styles from "@pages/article/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import {
  useFavouriteArticleMutation,
  useUnFavouriteArticleMutation,
} from "@service/article";

interface Props {
  id: string|undefined;
  isFavourite: boolean;
}

export default function Favourite({ id, isFavourite }: Props) {
  // 点赞
  const [favourite] = useFavouriteArticleMutation();
  // 取消点赞
  const [unFavourite] = useUnFavouriteArticleMutation();
  // 点赞、取消点赞文章
  const onFavouriteClick = () => {
    isFavourite ? unFavourite(id) : favourite(id);
  };
  return (
    <div className={styles.item} onClick={onFavouriteClick}>
      <GeekIcon type={isFavourite ? "iconbtn_like_sel" : "iconbtn_like2"} />
      <span>点赞</span>
    </div>
  );
}